<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="../WEB-INF/plantilla/layout.xhtml">
	<ui:define name="contenido">

		<h:form id="frmAlg">

			<p:layout style="min-width:300px;min-height:360px;" id="layout" >
				<p:layoutUnit  position="west" header="Algoritmo Propio" size="300" minSize="300" maxSize="300" >

						<h:panelGrid columns="1" style="font-size: 15px;font-weight: bold; padding: 0px 0px 0px 50px;" >
    						<h:outputLabel value="Entrenamiento Nº #{alg.numeroConfiguracion}" />
    					</h:panelGrid>
    					
						<h:panelGrid columns="2" style="padding: 10px 15px 10px 65px">
							<h:outputLabel for="txtPob" value="Tamaño Población:"  />
							<p:inputText value="#{alg.t_poblacion}" id="txtPob" size="10"/>
							<h:outputText  value="Condición de Parada:" />
							<p:commandButton icon="ui-icon-extlink"
						                        style="font-size: 8px;" 
						                        title="Condicion de Parada"  
						                        onclick="dlgParada.show()" />
							<h:outputText  value="Métodos de Selección:" />
							<p:commandButton icon="ui-icon-extlink"
						                        style="font-size: 8px;" 
						                        title="Metodos" 
						                        onclick="dlgSeleccion.show()" />
						</h:panelGrid>
						
						<h:panelGrid columns="1" style="padding: 0px 15px 10px 65px">
							<h:panelGrid columns="2" >
								<h:outputText  value="Probabilidad Croosover:" />
								<p:commandButton style="font-size: 8px;"
							                        icon="ui-icon-extlink"
							                        onclick="dlgCroosover.show()"/>
						
							</h:panelGrid>
							<h:outputText id="outProbC" value="#{alg.x}%" style="font-size: 13px;font-weight: bold;margin: 0px 70px;" />
							<h:inputHidden id="txtC" value="#{alg.x}" />
							<p:slider for="txtC" display="outProbC" style="font-size: 10px;" displayTemplate="{value}%" />
						</h:panelGrid>
						
						<h:panelGrid columns="1" style="padding: 0px 15px 10px 65px">
							<h:panelGrid columns="2">
								<h:outputText  value="Probabilidad Mutación:" />
								<p:commandButton style="font-size: 8px;" 
						                        icon="ui-icon-extlink" 
						                        title="Metodos" 
						                        onclick="dlgMutacion.show()" />
						    </h:panelGrid>          
							<h:outputText id="outProbM" value=" #{alg.u}%" style="font-size: 13px;font-weight: bold;margin: 0px 70px;" />
							<h:inputHidden id="txtM" value="#{alg.u}" />
							<p:slider for="txtM" display="outProbM" style="font-size: 10px;" displayTemplate="{value}%" />
						</h:panelGrid>
						<h:panelGrid columns="3" style="padding: 0px 15px 10px 65px">

								<h:outputLabel for="txtPac" value="Número Pacientes" />

								<p:inputText value="#{alg.n_pacientes}" readonly="true" id="txtPac" size="10">
								</p:inputText>
								<p:message for="txtPac" />

						</h:panelGrid>

				</p:layoutUnit>

				<p:layoutUnit position="center" size="180"
					 header="Parámetros" minSize="180" maxSize="180"
					>
					
								<h:outputText 
									value="Reglas(K)" style="font-size: 10px;font-weight: bold;padding: 0px 15px 10px 35px;" />
								
								<h:panelGrid columns="4" style="margin-top:10px;padding: 0px 15px 10px 35px;"  >
										
										<h:outputLabel for="txtRegOms" value="OMS" />
							            <h:outputLabel for="txtRegAaec" value="AAEC" />
							            <h:outputLabel for="txtRegAcc" value="AHA" />
							            <h:outputLabel for="txtRegPne"
										value="NCEP-AT II" />
							       
							            	<p:inputText value="#{alg.numReglasOMS}" id="txtRegOms"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
								        	
								        	<p:inputText value="#{alg.numReglasAAEC}" id="txtRegAaec"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
									
								        	<p:inputText value="#{alg.numReglasAAC}" id="txtRegAcc"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
									
								        	<p:inputText value="#{alg.numReglasPNE}" id="txtRegPne"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
									
								</h:panelGrid>
								
								<h:panelGrid columns="3" style="margin-top:10px;padding: 0px 15px 10px 35px"  >
								    
								    <h:outputLabel for="txtRegFdi" value="IDF" />
								    <h:outputLabel for="txtRegCne" value="ACE" />
								    <h:outputLabel for="txtRegGeri" value="EGIR" />
							            	<p:inputText value="#{alg.numReglasFDI}" id="txtRegFdi"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
								    		<p:inputText value="#{alg.numReglasCNE}" id="txtRegCne"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
								        	<p:inputText value="#{alg.numReglasGERI}" id="txtRegGeri"
										size="5">
											<p:ajax event="keyup" listener="#{alg.sumaReglas}" update="txtRegTot" ></p:ajax>
									</p:inputText>
									
								    
								</h:panelGrid>
								
								<h:panelGrid columns="3" style="padding: 0px 15px 10px 35px">

									<h:outputLabel for="txtRegTot" value="Reglas Totales" />


									<p:inputText value="#{alg.numTotal}" id="txtRegTot" size="10">
									</p:inputText>
									<p:message for="txtRegTot" />

									<h:outputLabel for="txtNumHall" value="Hallazgos" />

									<p:inputText value="#{alg.numHallazgos}" readonly="true"
										id="txtNumHall" size="10">
									</p:inputText>
									<p:message for="txtNumHall" />


								</h:panelGrid>
								<h:panelGrid columns="3" style="padding: 0px 25px 10px 40px">
				
				
			<h:panelGrid columns="3">
					
				<p:commandButton id="cmbEje" value="Ejecutar" ajax="true" update="pnlResul" rendered="#{alg.casoRun}"
					actionListener="#{alg.correr}" >
				</p:commandButton>
				
				<p:commandButton id="cmbContinuar" value="Recargar" ajax="true" update="pnlResul" rendered="#{alg.casoContinuar}"
					actionListener="#{alg.correr}" >
				</p:commandButton>
				
				<p:commandButton id="cmbEstado" value="Ver Proceso" onclick="dlgProceso.show()"  > </p:commandButton>
										
			</h:panelGrid>			
	
				
			</h:panelGrid>

				</p:layoutUnit>
				
				
				<p:layoutUnit position="east" size="250"
					 header="Resultados" minSize="250" maxSize="250">
							<p:panel id="pnlResul" header="Cromosoma Final">
								<p:inputTextarea  value="#{alg.resultado}" rows="#{alg.filas}" 
										cols="#{alg.columnas}">
							
								</p:inputTextarea>
								
								
			
							</p:panel>
							
							
				</p:layoutUnit>
				
			</p:layout>
			
			<p:dialog id="dialogP" widgetVar="dlgParada" showEffect="fade" hideEffect="fade" modal="true" width="auto" 
		    			header="Condicion de Parada"  >
 
	 			<p:panel id="panelParada">
		    		<h:panelGrid  columns="1">
		    				
		    				<p:selectOneRadio style="font-size: 10px;" id="console" value="#{alg.condicionParada}">
					            <f:selectItem itemLabel="Tiempo Limite" itemValue="Tiempo Procesamiento Limite" />
					            <f:selectItem itemLabel="Maximo Generaciones" itemValue="Maximo Numero Generaciones" />
					            <f:selectItem itemLabel="Maximo Fitness" itemValue="Calidad Fitness" />
					            <f:selectItem itemLabel="Poblacion Similar" itemValue="Poblacion Similar"  />
								<p:ajax event="change" listener="#{alg.cambioParada}" update="txtDatoParada"  ></p:ajax>
					        </p:selectOneRadio>
							
							<p:inputMask style="margin: 0px 183px;" value="#{alg.datoParada}" 
							mask="#{alg.formatoDatoParada}" disabled="#{alg.flagDatoParada}" id="txtDatoParada" size="5" />
        
		    		</h:panelGrid>
		    		
		    		<p:commandButton  style="margin: 0px 185px;" value="Aceptar" onclick="PF('dlgParada').hide()" icon="ui-icon-check" />
 
	 			</p:panel> 
   			</p:dialog>
   			
			<p:dialog id="dialogS" widgetVar="dlgSeleccion" showEffect="fade" hideEffect="fade" modal="true" width="auto" 
		    			header="Metodos Seleccion"  >
 
	 			<p:panel id="panelSeleccion">
		    		<h:panelGrid  columns="1">
		    			
		    			<h:selectOneRadio id="seleccion" value="#{alg.selectedMetodoSeleccion}" columns="1">
            				<f:selectItem itemLabel="Ruleta" itemValue="metodoRuleta" />
            				<f:selectItem itemLabel="Estocástico Universal" itemValue="metodoEstocastico" />
            				<f:selectItem itemLabel="Torneo" itemValue="metodoTorneo" />
        				</h:selectOneRadio>
        
		    		</h:panelGrid>
		    		
		    		<p:commandButton style="margin: 0px 115px;" value="Aceptar" onclick="PF('dlgSeleccion').hide()" icon="ui-icon-check" />
 
	 			</p:panel> 
   			</p:dialog>
   			

			<p:dialog id="dialogC" widgetVar="dlgCroosover" showEffect="fade" hideEffect="fade" modal="true" width="auto" 
		    			header="Metodos Croosover"  >
 
	 			<p:panel id="panelCroosover">
		    		<h:panelGrid  columns="1">
		    			
		    			<h:selectOneRadio id="croosover" value="#{alg.selectedOperadorCroosover}"  columns="1">
            				<f:selectItem itemLabel="MultiPunto 1" itemValue="metodoMultipunto1" />
            				<f:selectItem itemLabel="MultiPunto 2" itemValue="metodoMultipunto2" />
            				<f:selectItem itemLabel="MultiPunto 3" itemValue="metodoMultipunto3" />
            				<f:selectItem itemLabel="MultiPunto 4" itemValue="metodoMultipunto4" />
        				</h:selectOneRadio>
        
		    		</h:panelGrid>
		    		
		    		<p:commandButton value="Aceptar" style="margin: 0px 135px;" onclick="PF('dlgCroosover').hide()" icon="ui-icon-check" />
 
	 			</p:panel> 
   			</p:dialog>
   			
   			<p:dialog id="dialogM" widgetVar="dlgMutacion" showEffect="fade" hideEffect="fade" modal="true" width="auto" 
		    			header="Metodos Mutacion"  >
				
				<p:panel id="panelMutacion">
		    		<h:panelGrid  columns="1">
		    			
		    			<h:selectOneRadio  id="mutacion" value="#{alg.selectedOperadorMutacion}" columns="1">
            				<f:selectItem itemLabel="Mutacion 1 Punto" itemValue="metodoPunto1" />
            				<f:selectItem itemLabel="Mutacion 2 Puntos" itemValue="metodoPunto2" />
        				</h:selectOneRadio>
        
		    		</h:panelGrid>
		    		
		    		<p:commandButton value="Aceptar" style="margin: 0px 100px;" onclick="PF('dlgMutacion').hide()" icon="ui-icon-check" />
 
	 			</p:panel> 
 
   			</p:dialog>

			
			<p:dialog id="dialogProceso" widgetVar="dlgProceso" showEffect="fade" hideEffect="fade" modal="true" 
			width="auto"  height="auto" header="Proceso Ejecución"  >
				
		    			
		    			<ui:include src="analisisAlgoritmo.xhtml"  >
		    			</ui:include>
        
		    		
 
   			</p:dialog>


		</h:form>




	</ui:define>
</ui:composition>

</html>
